<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="menuLeave">
      <dt>全部分类</dt>
      <dd v-for="(item, index) in menu" :key="index" @mouseenter="menuEnter(item.type)">
        <i :class="item.type"></i>
        {{item.name}}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="type" @mouseenter="detailEnter" @mouseleave="detailLeave">
      <template v-for="(item, index) in curList.child">
        <h4 :key="index">{{item.title}}</h4>
        <span v-for="(list, idx) in item.child" :key="idx">{{list}}</span>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: "",
      menu: [
        {
          type: "food",
          name: "美食",
          child: [
            {
              title: "美食",
              child: ["美食", "美食", "美食"]
            }
          ]
        },
        {
          type: "hotel",
          name: "酒店",
          child: [
            {
              title: "酒店",
              child: ["三星级酒店", "四星级酒店", "五星级酒店"]
            }
          ]
        }
      ]
    };
  },
  computed: {
    curList() {
      return this.menu.find(item => item.type === this.type);
    }
  },
  methods: {
    menuEnter(type) {
      this.type = type;
    },
    menuLeave() {
      const self = this;
      self._timer = setTimeout(() => {
        self.type = "";
      }, 200);
    },
    // 进入子菜单技巧
    detailEnter() {
      clearTimeout(this._timer);
    },
    detailLeave() {
      this.type = "";
    }
  }
};
</script>
<style lang="scss">
</style>